<template>
  <svg
    class="svg-icon"
    :style="{ '--icon-size': iconSize }"
    aria-hidden="true">
    <use
      :href="`#icon-${name}`"
      :fill="color" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: { name: String, color: String, size: [String, Number] },
  computed: {
    iconSize() {
      let size = this.size;
      if (typeof size === 'number' && !Number.isNaN(size)) return `${size}px`;
      return size;
    },
  },
};
</script>

<style lang="scss" scoped>
.svg-icon {
  --icon-size: 24px;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
}
</style>
